<template>
  <div>
    <el-container>
      <el-header class="project-header">
        <el-row style="width:100%;">
          <el-col :span="16">
            <h2>zingon-doc内部文档系统</h2>
          </el-col>
          <el-col :span="8" style="display:flex;align-items:flex-end;flex-direction: column;">
            <el-dropdown @command="handleCommand">
              <el-tag>{{loginUser}}</el-tag>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="selfInfo">个人设置</el-dropdown-item>
                <el-dropdown-item command="logout">推出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <div class="project-row">
          <el-row :gutter="40">
            <el-col class="project-col" v-for="p in projects" :key="p.id" :span="6" >
              <div @click="to(p)">
                <el-card shadow="hover">
                  <div slot="header" class="clearfix">
                    <span>{{p.name}}</span>
                    <router-link :to="'/projectSetting/'+p.id">
                      <span style="float:right;">
                        <i class="el-icon-setting"></i>
                      </span>
                    </router-link>
                  </div>
                  <div class="project-description">
                    {{p.description}}
                  </div>
                  <div class="project-create-date">
                    {{p.createDate}}
                  </div>
                </el-card>
              </div>
            </el-col>
            <el-col class="project-col" :span="6">
              <el-card shadow="hover">
                <div slot="header" class="clearfix">
                  <span>添加项目</span>
                </div>
                <div class="project-add" @click="dialogFormVisible=true">
                  <i class="el-icon-plus"></i>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
    <el-dialog title="添加项目" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="project">
        <el-form-item label="项目名称">
          <el-input v-model="project.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="project.description" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveProject">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addProject } from "../../api";
import { Notification } from "element-ui";
import { getNickName, removeToken } from "../../util/auth";

export default {
  name: "mdedit",
  data: function() {
    return {
      projects: [],
      dialogFormVisible: false,
      project: {
        name: "",
        description: ""
      }
    };
  },
  computed: {
    loginUser() {
      return getNickName();
    }
  },
  methods: {
    to(p){
      this.$store.commit("setProject",p);
      this.$router.push({path:"/index/"+p.id});
    },
    loginOut() {
      this.$store.dispatch("loginOut");
    },
    saveProject() {
      let _this = this;
      addProject(this.project).then(function(resp) {
        _this.projects.push(resp.data);
        _this.dialogFormVisible = false;
        Notification.success("添加成功");
      });
    },
    handleCommand(command) {
      if (command === "logout") {
        removeToken();
        this.$router.push({ path: "login" });
      }else{
        alert("开发中。。。");
      }
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      let _this = this;
      this.request({
        url: "/project",
        methods: "get"
      })
        .then(function(resp) {
          if (resp.errmsg === "ok") {
            _this.projects = resp.data;
          }
        })
        .catch(function(e) {
          console.log(e);
        });
    });
  }
};
</script>

<style scoped>
.project-header {
  align-items: center;
  display: flex;
  font-size: 30px;
}
.project-row {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.project-row .el-row {
  width: 50%;
}

.project-col {
  margin-bottom: 20px;
}

.project-col .el-card {
  height: 190px;
}

.project-description {
  height: 90px;
}

.project-create-date {
  font-size: 12px;
  color: lightgray;
  text-align: right;
}

.project-add {
  text-align: center;
  font-size: 90px;
}
</style>
